<template>
	<view class="all">
		<!-- 标题栏 -->
		<view class="title">
			<image src="../../static/img/Return arrow(2).png" mode=""></image>
			<text>基金</text>
			<view class="title-img">
				<image src="../../static/img/magnifyingGlass.png" mode=""></image>
				<image src="../../static/img/omit.png" mode=""></image>
			</view>
		</view>
		<!-- 总金额显示 -->
		<view class="totalMoney">
			<view class="totalMoney-top">
				<text>总金额</text>
				<image src="../../static/img/closeEyesWhite.png" mode=""></image>
			</view>
			<text class="totalMoney-bottom">******</text>
		</view>
		<!-- 基金模块分类 -->
		<view class="fund-class">
			<!-- 基金上面一行 -->
			<view class="fund-classTop">
				<view>
					<image src="../../static/img/fundShop.png" mode="" @click="fundShop"></image>
					<view>基金超市</view>
				</view>
				<view>
					<image src="../../static/img/new.png" mode="" @click="chiefFund"></image>
					<view>首发基金</view>
				</view>
				<view>
					<image src="../../static/img/fundGood.png" mode="" @click="optimization"></image>
					<view>优选基金</view>
				</view>
				<view>
					<image src="../../static/img/rankingList.png" mode="" @click="ranking"></image>
					<view>排行榜</view>
				</view>
				<view>
					<image src="../../static/img/reserve.png" mode="" @click="automatic"></image>
					<view>基金定投</view>
				</view>
			</view>
			<!-- 基金下面一行 -->
			<view class="fund-classBootm">
				<view>
					<image src="../../static/img/house.png" mode=""></image>
					<view>养老基金</view>
				</view>
				<view>
					<image src="../../static/img/ok.png" mode="" @click="litheFund"></image>
					<view>轻盈投</view>
				</view>
				<view>
					<image src="../../static/img/ebody.png" mode=""></image>
					<view>农银快e宝</view>
				</view>
				<view>
					<image src="../../static/img/hot.png" mode=""></image>
					<view>集合计划</view>
				</view>
				<view>
					<image src="../../static/img/e6b2.png" mode=""></image>
					<view>热门主题</view>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper-container">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/img/lithe.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/img/lithe2.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/img/lithe3.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<image src="../../static/img/lun.jpg" mode="" class="pin"></image>
		<!-- 热门主题 -->
		<view class="hot">
			<view class="hot-title">
				<text>热门主题</text>
				<image src="../../static/img/right.png" mode=""></image>
			</view>
			<view class="hot-content">
				<!-- 信息 -->
				<view class="content">
					<view class="message">信息</view>
					<view class="field">
						<view class="field-one">智能时代，正在开启</view>
						<view>政策加码，巨头入局，科技新周期即将到来</view>
					</view>
				</view>
				<!-- 医药 -->
				<view class="medicine">
					<view class="message1">医药</view>
					<view class="field">
						<view class="field-one">人类发展的刚需行业</view>
						<view>行业格局重塑，新产品、新技术带来成长</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 首发基金 -->
		<view class="firstFund">
			<view class="firstFund-title">
				<text>首发基金</text>
				<image src="../../static/img/right.png" mode=""></image>
			</view>
			<view class="box">
				<view class="box-left">
					<view class="time">08/04-08/25</view>
					<view class="box-word">富国融裕两年持有...</view>
					<view class="box-num">018038</view>
					<view class="risk">
						<view class="risk-1">混合型</view>
						<view class="risk-1">中等风险</view>
					</view>
				</view>
				<view class="box-right">
					<view class="time">08/04-08/25</view>
					<view class="box-word">富国融裕两年持有...</view>
					<view class="box-num">018038</view>
					<view class="risk">
						<view class="risk-1">混合型</view>
						<view class="risk-1">中等风险</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		methods: {
			// 跳转基金超市
			fundShop() {
				uni.navigateTo({
					url: "/pages/fundShop/index"
				})
			},
			// 跳转首发基金
			chiefFund() {
				uni.navigateTo({
					url: "/pages/firstFund/index"
				})
			},
			// 跳转优选基金
			optimization() {
				uni.navigateTo({
					url: "/pages/optimizationFund/optimizationFund"
				})
			},
			// 跳转基金定投
			automatic() {
				uni.navigateTo({
					url: "/pages/fundAutomatic/fundAutomatic"
				})
			},
			// 跳转排行榜
			ranking() {
				uni.navigateTo({
					url: "/pages/fundRanking/fundRanking"
				})
			},
			// 轻盈投
			litheFund() {
				uni.navigateTo({
					url: "/pages/litheFund/litheFund"
				})
			}
		}
	}
</script>

<style scoped>
	.all {
		background-color: #f7f7f7;
	}

	.title {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		font-size: 40rpx;
		font-weight: 600;
	}

	.title image {
		width: 50rpx;
		height: 50rpx;
	}

	.title text {
		margin-left: 20rpx;
	}

	.totalMoney {
		height: 200rpx;
		background-color: #ffa500ad;
		color: white;
		font-size: 32rpx;
		padding: 50rpx 30rpx;
		
	}
	.totalMoney-bottom {
		font-size: 60rpx;
	}

	.totalMoney-top image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.totalMoney-top {
		display: flex;
		align-items: center;
	}

	/* 基金模块分类 */
	.fund-class {
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		padding: 0rpx 20rpx;
	}

	.fund-class image {
		width: 80rpx;
		height: 80rpx;
	}

	.fund-classTop,
	.fund-classBootm {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 150rpx;
	}

	.fund-classTop,
	.fund-classBootm view {
		text-align: center;
	}

	/* 轮播图 */
	.swiper-container {
		margin-left: 40rpx;
	}

	.swiper-container image {
		width: 95%;
		height: 300rpx;
	}

	/* 广告图 */
	.pin {
		width: 90%;
		height: 170rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		border-radius: 10rpx;
	}

	/* 热门主题 */
	.hot-title,
	.firstFund-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 45rpx;
		margin-top: 20rpx;
	}

	.hot-title text {
		font-size: 32rpx;
		font-weight: 600;

	}

	.hot-title image {
		width: 50rpx;
		height: 50rpx;
	}

	.message {
		border-radius: 50%;
		border: 1rpx dashed lightblue;
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: lightblue;
	}

	.message1 {
		border-radius: 50%;
		border: 1rpx dashed lightblue;
		width: 85rpx;
		height: 85rpx;
		text-align: center;
		line-height: 80rpx;
		color: lightblue;
	}


	/* 信息 */
	.content {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin: 20rpx 0rpx;
	}

	.field-one {
		font-size: 40rpx;
	}

	/* 医药 */
	.medicine {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin: 20rpx 0rpx;
	}

	/* 首发基金 */
	.firstFund-title text {
		font-size: 32rpx;
		font-weight: 600;
	}

	.firstFund-title image {
		width: 50rpx;
		height: 50rpx;
	}

	.box {
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;
	}

	.box-left,
	.box-right {
		width: 300rpx;
		height: 250rpx;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 5rpx 5rpx 5rpx #9a959561;
	}

	.time {
		width: 180rpx;
		height: 40rpx;
		background-color: orange;
		margin: 0 auto;
		color: white;
		line-height: 40rpx;
	}

	.box-word {
		margin-top: 40rpx;
		font-size: 30rpx;
		margin-left: 40rpx;
	}

	.box-num {
		color: #565656;
		width: 100rpx;
		height: 40rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.risk {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.risk-1 {
		width: 120rpx;
		height: 40rpx;
		border: 1rpx #b8b8b8 solid;
		text-align: center;
		color: #565656;
	}
</style>